<template>
  <div>
    <h2>当前求和：{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from "vue";

export default {
  name: 'test_life',
  setup() {
    let sum = ref(0)

    // 通过组合式api的形式使用生命周期钩子

    // 页面呈现 未经 Vue编译的DOM结构时候
    onBeforeMount(() => {
      console.log('---onBeforeMount---');
    })
    // 页面呈现 经过 Vue编译的DOM 
    // 真实DOM插入页面时候，初始化操作
    onMounted(() => {
      console.log('---onMounted---');
    })
    // 数据是新的，但页面是旧的时候，更新数据之前
    onBeforeUpdate(() => {
      console.log('---onBeforeUpdate---');
    })
    // 数据是新的，页面也是新的时候，数据保持同步时候
    onUpdated(() => {
      console.log('---onUpdated---');
    })
    // Vue 实例销毁之前被调用
    onBeforeUnmount(() => {
      console.log('---onBeforeUnmount---');
    })
    // 组件实例被卸载时触发。通常用于执行一些清理工作，比如取消定时器、解除事件监听器或者清理其他资源。
    onUnmounted(() => {
      console.log('---onUnmounted---');
    })

    return {
      sum
    }
  },

  // vue3 的生命周期函数
  // 通过配置项的形式使用生命周期钩子，意思是可以放到setup
  // beforeCreate() {
  //   console.log('---beforeCreate---');
  // },
  // created() {
  //   console.log('---created---');
  // },
  // beforeMount() {
  //   console.log('---beforeMount---');
  // },
  // mounted() {
  //   console.log('---mounted---');
  // },
  // beforeUpdate() {
  //   console.log('---beforeUpdate---');
  // },
  // updated() {
  //   console.log('---updated---');
  // },
  // beforeUnmount() {
  //   console.log('---beforeDestroy---');
  // },
  // unmounted() {
  //   console.log('---destroyed---');
  // },
}
</script>
